import React, { Component } from "react";

class App extends Component {
  state = {
    count: 10,
    show: true,
    list: ["zhangsan", "lisi", "wangwu"],
    content: "<h1>React.js是一个构建UI的库</h1>",
  };

  handleClick() {
    this.setState((prevState) => {
      return {
        show: !prevState.show,
      };
    });
  }

  add() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // list: prevState.list.push("zhaoliu"), ×
    //       // list: prevState.list.concat("zhaoliu"), √
    //       list: [...prevState.list, "zhaoliu"],
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    // 复杂类型地址没有改变
    this.state.list.push("zhaoliu");
    // console.log(this.state.list);
    // 为了让响应式生效
    this.setState({});
  }

  render() {
    return (
      <>
        <h2 title={this.state.count}>数据渲染</h2>
        <p>count: {this.state.count}</p>

        {this.state.show && <p>hello</p>}
        <button onClick={this.handleClick.bind(this)}>btn</button>

        <hr />

        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.add.bind(this)}>btn</button>

        <hr />

        <div>{this.state.content}</div>
        {/* 标签的显示，相当于v-html */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
